<template>
  <div class="add-record">
    <header-bar title="工作纪实"></header-bar>
    <div class="content-wrapper">
      <div class="content"  ref="scroll">
        <group class="form">
          <cell-box>
            <div class="icon-wrapper">
             	<icon name="clock" :scale="3"></icon>
	            <div class="picker-wrapper">
	              <p class="text">时间:</p>
	              <span>{{form.datetime}}</span>
	              <button class="datetime-btn" @click="showDatetime">
	              	<icon name="arrow-down" scale="2" class="icon-arrow"></icon>
	              </button>
	            </div>
        	</div>
          </cell-box>
          <cell-box>
            <div class="icon-wrapper">
              <icon name="serial-number" :scale="3"></icon>
              <span class="icon-title">内容</span>
            </div>
          </cell-box>
          <x-textarea placeholder="键入文本样式" class="cont-area"></x-textarea>
        </group>      
      </div>
    </div>
     <div class="button">
        <x-button class="confirm-btn">确定</x-button>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {
    Group,
    CellBox,
    XTextarea,
    XButton,
    Datetime
  } from 'vux'
  import HeaderBar from '@/components/HeaderBar'

  export default {
    components: {
      Group,
      CellBox,      
      HeaderBar,
      XTextarea,
      XButton,
      Datetime
    },
    data(){
      return {
        form: {
          datetime: '2017-08-21',
          type: '键入文本样式',
          keywords: ''
        }
      }
    },
    methods: {
      _initScroll(){
        this.scroll = new BScroll(this.$refs.scroll)
      },
      showDatetime(){
        console.log(this.$vux)
        let _this = this
        this.$vux.datetime.show({
          cancelText: '取消',
          confirmText: '确定',
          format: 'YYYY-MM-DD',
          value: '2017-05-20 18',
          onConfirm (val) {
            console.log('plugin confirm', val)
            _this.form.datetime = val
          },
          onShow () {
            console.log('plugin show')
          },
          onHide () {
            console.log('plugin hide')
          }
        })
      },
      search(){
        console.log('fff')
        this.$router.push({
          name: 'dispatchSearchList'
        })
      }
    },
    mounted(){
      setTimeout(() => {
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
@import '~@/styles/variables.less';

.add-record{
  	background-color: @color-background-main;
    .content-wrapper{
      position: absolute;
      top: 0.32rem;
      bottom: 0;
      width: 100%;
      .content{
        width: 100%;
        height: 100%;
        .form{
           .text{
            font-size: 16px;
            color: #9a9a9a;
           }
           .icon-wrapper{
                display: flex;
                align-items: center;
                margin-right: 0.1rem;
                width: 7.2rem;
                height: 0.7rem;
                border-radius: 50%;
                .picker-wrapper{
               	margin-left: 15px;
               	padding:0.4rem 0rem;
               }
                .icon-title{
                color: #ababab;
                margin-left: 0.26rem;
              }
            	.datetime-btn{
		            font-size: 17px;
		            outline: none;
		            border: none;
		            background-color: transparent;
	            	.icon-arrow{
	                color: #b3b3b3;
	                margin-top: 0.1rem;
	                padding-left: 0.04rem;
	                }
	        	}
            }
	           
			.cont-area{
				height: 7.2rem;
			}
        }    
      }
    }
	.button{
	      width: 100%;
	      position: fixed;
	      bottom: 2px;
	      .confirm-btn{
	      	height: 1rem;
	        background: #47a8ed;
	        color: #fff;
	        border: none;
	        font-size: 20px;
	      }
	}
}
</style>